​
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>leaflet移动点位(轨迹回放效果)</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
    integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
  <style>
    html,
    body,
    #map {
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .removeBtn {
      position: absolute;
      bottom: 30px;
      right: 120px;
      z-index: 199;
      padding: 10px;
      background-color: #007acc;
      color: #fff;
    }

    .addBtn {
      position: absolute;
      bottom: 30px;
      right: 20px;
      z-index: 199;
      padding: 10px;
      background-color: #007acc;
      color: #fff;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <div class="removeBtn" id="removeBtn">移除按钮</div>
  <div class="addBtn" id="addBtn">添加按钮</div>

  <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
    integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
  <script type="text/javascript" src="./assets/js/movingMarker.js"></script>
  <script type="text/javascript">

    var removeBtn = document.getElementById('removeBtn');
    var addBtn = document.getElementById('addBtn');

    var map = L.map('map').setView([36.09, 120.35], 13);
    // L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    //   attribution: ''
    // }).addTo(map);

    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

    var parisKievLL = [
      [48.8567, 2.3508],
      [50.45, 30.523333]
    ];
    var londonParisRomeBerlinBucarest = [
      [51.507222, -0.1275],
      [48.8567, 2.3508],
      [41.9, 12.5],
      [52.516667, 13.383333],
      [44.4166, 26.1]
    ];
    var londonBrusselFrankfurtAmsterdamLondon = [
      [51.507222, -0.1275],
      [50.85, 4.35],
      [50.116667, 8.683333],
      [52.366667, 4.9],
      [51.507222, -0.1275]
    ];
    var barcelonePerpignanPauBordeauxMarseilleMonaco = [
      [41.385064, 2.173403],
      [42.698611, 2.895556],
      [43.3017, -0.3686],
      [44.837912, -0.579541],
      [43.296346, 5.369889],
      [43.738418, 7.424616]
    ];


    map.fitBounds(londonParisRomeBerlinBucarest);

    //点击标记开始/暂停
    //========================================================================
    var marker1 = L.Marker.movingMarker(parisKievLL, [10000]).addTo(map);
    var polyline  = L.polyline(parisKievLL).addTo(map);
    marker1.once('click', function () {
      marker1.start();
      marker1.closePopup();
      marker1.unbindPopup();
      marker1.on('click', function () {
        if (marker1.isRunning()) {
          marker1.pause();
        } else {
          marker1.start();
        }
      });
      setTimeout(function () {
        marker1.bindPopup('<b>点我暂停 !</b>').openPopup();
      }, 2000);
    });

    marker1.bindPopup('<b>点我开始</b> !</b>', {
      closeOnClick: false
    });
    marker1.openPopup();

    removeBtn.onclick = function (e) {
      console.log(e, '点击移除');
      map.removeLayer(marker1);
      map.removeLayer(polyline);
      
    }

    addBtn.onclick = function(e) {
      console.log('点击添加');
      polyline = L.polyline(parisKievLL).addTo(map);

    }


    //=========================================================================
    //添加一个循环走的标记
    var marker3 = L.Marker.movingMarker(londonBrusselFrankfurtAmsterdamLondon,
      [2000, 2000, 2000, 2000], {
      autostart: true,
      loop: true
    }).addTo(map);

    marker3.loops = 0;
    marker3.bindPopup('', {
      closeOnClick: false
    });

    //=========================================================================
    //设置循环loop事件，进行循环次数计数
    marker3.on('loop', function (e) {
      marker3.loops++;
      if (e.elapsedTime < 50) {
        marker3.getPopup().setContent("<b>Loop: " + marker3.loops + "</b>")
        marker3.openPopup();
        setTimeout(function () {
          marker3.closePopup();

          if (!marker1.isEnded()) {
            marker1.openPopup();
          } else {
            if (marker4.getLatLng().equals([45.816667, 15.983333])) {
              marker4.bindPopup('点击地图使我移动 !');
              marker4.openPopup();
            }

          }

        }, 2000);
      }
    });

    //marker4的默认位置
    var marker4 = L.Marker.movingMarker([
      [45.816667, 15.983333]
    ], []).addTo(map);

    //设置地图的点击事件，使标记移动到点击的位置
    map.on("click", function (e) {
      marker4.moveTo(e.latlng, 2000);
    });

    //=========================================================================

    var marker5 = L.Marker.movingMarker(
      barcelonePerpignanPauBordeauxMarseilleMonaco,
      10000, {
      autostart: true
    }).addTo(map);

    marker5.addStation(1, 2000);
    marker5.addStation(2, 2000);
    marker5.addStation(3, 2000);
    marker5.addStation(4, 2000);

    L.polyline(barcelonePerpignanPauBordeauxMarseilleMonaco, {
      color: 'green'
    }).addTo(map);

  </script>
</body>

</html>

​